{% extends "base.html" %}
{% set active_page = "Euclid Metric" %}

{% block title %}DAM: Euclid Metric{% endblock %}

{% block head %}
    <link type="text/css" href="{{ url_for('static', filename='css/euclid.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
    <div class="row no-gutters justify-content-center mt-5rem mb-5">
        <div class="col-10">
            <div>
                <form class="row no-gutters" id="upload-file" method="post" enctype="multipart/form-data">
                    <div class="col-10 px-1 py-1 file-box">
                        <a class="file-hint">请在此处上传图片，然后单击"匹配"
                            <input class="file-input" type="file" size="2" id="input_file" name="image">
                        </a>
                    </div>
                    <div class="col-1 px-1 py-1 btn-box">
                        <a class="btn-text mx-auto d-block w-100 text-center" id="submit">匹配</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-11">
            <div class="row justify-content-center">
                {% for x in range(10) %}
                <div class="img_to_match col-xl-2 col-lg-3 col-md-4 col-sm-5 col-xs-6 px-2 py-2" id="img_{{ x }}">
                    <img src="{{ url_for('static', filename="images/%d.jpg" % x) }}" alt="候选图{{ x }}" class="img-fluid">
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script type="text/javascript" src="{{ url_for('static', filename='include/jquery.form.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='scripts/euclid.js') }}"></script>
{% endblock %}